<!doctype html>
<title>TABLE height redistribution</title>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/resources/check-layout-th.js"></script>
<link rel='stylesheet' href='../support/base.css' />
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout" />
<style>
  main table {
    border-collapse: collapse;
    background: #DDD;
    height: 100px;
  }
  main td {
    padding: 0;
  }
  main table tbody:nth-child(1) {
    background: #CCC;
  }
  main table tbody:nth-child(2) {
    background: #AAA;
  }
  main table tbody:nth-child(3) {
    background: #999;
  }
  main table thead {
    background: rgba(0,255,0,0.3);
  }
  main table tfoot {
    background: rgba(255,255,0,0.3);
  }
  main .test {
    margin-top:24px;
  }
</style>
<main>
 <h1>Tests for redistribution of table height to row group height.</h1>
 <p>This algorithm has not been standardized. Browsers implementations disagree</p>
<p class="test">Empty sections and rows do grow when table height forces it.</p>
<table>
  <tbody data-expected-height="100">
    <tr data-expected-height="100">
      <td style="width:0;height:0" data-expected-height="100"></td>
    </tr>
  </tbody>
</table>

<p class="test">Unconstrained sections grow proportionally.</p>
<p>Chrome only grows first TBODY. This test expects only TBODYs to grow.</p>
<table >
  <thead data-expected-height="15">
    <tr><td><div style="height:15px">0,0</div></td></tr>
  </thead>
  <tbody data-expected-height="35">
    <tr><td>1,0</td></tr>
  </tbody>
  <tbody data-expected-height="35">
    <tr><td>2,0</td></tr>
  </tbody>
  <tfoot data-expected-height="15">
    <tr><td><div style="height:15px">3,0</div></td></tr>
  </tfoot>
</table>

<p class="test">Unconstrained sections grow proportionally to their size</p>
<table >
  <tbody data-expected-height="75">
    <tr><td>0,0</td></tr>
    <tr><td>1,0</td></tr>
    <tr><td>2,0</td></tr>
  </tbody>
  <tbody data-expected-height="25">
    <tr><td>3,0</td></tr>
  </tbody>
</table>

<p class="test">Fixed sections do not grow if there are unconstrained sections.</p>
<p>FF gets the right sizes, but gets locations wrong.</p>
<table>
  <tbody style="height:30px" data-expected-height="30" data-offset-y="0">
    <tr><td>0,0</td></tr>
  </tbody>
  <tbody data-expected-height="35" data-offset-y="30">
    <tr><td>1,0</td></tr>
  </tbody>
  <tbody data-expected-height="35" data-offset-y="65">
    <tr><td>2,0</td></tr>
  </tbody>
</table>

<p class="test">Fixed sections grow proportionally to their height.</p>
<p>FF grows sections equally, not proportionally to height</p>
<table>
  <tbody style="height:20px" data-expected-height="25">
    <tr><td>0,0</td></tr>
  </tbody>
  <tbody style="height:60px" data-expected-height="75">
    <tr><td>1,0</td></tr>
  </tbody>
</table>

<p class="test">Percentage resolution size. Initial percentage resolution size should be undefined.
<table >
  <tbody style="height:30%" data-expected-height="20">
    <tr><td><div style="height:20px">0,0</div></td></tr>
  </tbody>
  <tbody style="height:70%" data-expected-height="20">
    <tr><td><div style="height:20px">1,0</div></td></tr>
  </tbody>
  <tbody style="height:200px" data-expected-height="200">
    <tr><td>1,0</td></tr>
  </tbody>
</table>

<p class="test">Percentage resolution size. During table height redistribution, use table height as
  percentage resolution height..
<table>
  <tbody style="height:30%" data-expected-height="30">
    <tr><td><div style="height:20px">0,0</div></td></tr>
  </tbody>
  <tbody style="height:70%" data-expected-height="70">
    <tr><td><div style="height:20px">1,0</div></td></tr>
  </tbody>
</table>

<p class="test">Redistribute percentage bodies proportional to their initial height
<table>
  <tbody style="height:20%" data-expected-height="25">
    <tr><td><div style="height:20px">0,0</div></td></tr>
  </tbody>
  <tbody style="height:60%" data-expected-height="75">
    <tr><td><div style="height:20px">1,0</div></td></tr>
  </tbody>
</table>

<p class="test">Table min-height is not ignored.</p>
<table style="min-height:200px;height:auto" data-expected-height="200">
  <tbody>
    <tr><td><div style="height:50px">0,0</div></td></tr>
  </tbody>
</table>

<p class="test">Table max-height is ignored.</p>
<table style="max-height:90px;height:auto" data-expected-height="100">
  <tbody>
    <tr><td><div style="height:100px">0,0</div></td></tr>
  </tbody>
</table>

<p class="test">Table height does not include caption</p>
<table style="height:100px;" >
  <caption>not included</caption>
  <tbody>
    <tr data-expected-height="100"><td>0,0</td></tr>
  </tbody>
</table>

<p class="test">Excess row percentage height is distributed greedily.</p>
<table style="height:160px">
  <tbody>
    <tr style="height:50%" data-expected-height="80">
      <td >
        <div style="height:20px">0,0</div>
      </td>
    </tr>
    <tr style="height:30%" data-expected-height="48">
      <td >
        <div style="height:20px">1,0</div>
      </td>
    </tr>
    <tr style="height:80%" data-expected-height="32">
      <td >
        <div style="height:20px">2,0</div>
      </td>
    </tr>
  </tbody>
</table>

<p class="test">Row percentage height is influenced by percentage cells.</p>
<table style="height:100px">
  <tbody>
    <tr style="height:5%" data-expected-height="50">
      <td style="height:50%">0,0</td>
    </tr>
    <tr style="height:5%" data-expected-height="30">
      <td style="height:30%">1,0</td>
    </tr>
    <tr style="height:5%" data-expected-height="20">
      <td style="height:20%">2,0</td>
    </tr>
  </tbody>
</table>

<p class="test">Mixed constrained and unconstrained empty rows: only unconstrained rows grow.</p>
  <table style="width:50px;height:50px">
  <tbody data-expected-height="50">
    <tr style="height:0" data-expected-height="0"><td></td></tr>
    <tr data-expected-height="25"><td></td></tr>
    <tr data-expected-height="25"><td></td></tr>
  </tbody>
</table>

</main>
<script>
  checkLayout("table");
</script>
